<!DOCTYPE html>

<html>

<head>
    <title>Tokenizer Tests</title>

    <style type="text/css">
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: .2em 1em;
            border-bottom: 1px solid #CCC;
            font: 13px sans-serif;
        }

        .tokens ul,
        .tokens li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .result {
            font-weight: bold;
        }
        .fail {
            color: orange;
        }
        .error {
            color: red;
        }
        .pass {
            color: green;
        }
    </style>
</head>

<body>

    <script type="text/javascript">
        window.PIE = {};

        function runTest( css, expectedTokens) {
            document.write( '<tr><td class="css">' + css + '</td><td class="tokens"><ul>' );

            var result, error, className;
            try {
                var tokenizer = new PIE.Tokenizer( css ),
                    actualTokens = [],
                    token, expected, failure;

                function checkMatch( msgPrefix ) {
                    if( actualTokens.length === expectedTokens.length ) {
                        for( var i = 0, len = actualTokens.length; i < len; i++ ) {
                            expected = expectedTokens[i];
                            if( actualTokens[i].type !== expected.type ) {
                                failure = ( msgPrefix || '' ) + "Type mismatch at token " + i + ": expected " + expected.type + ', got ' + actualTokens[i].type;
                                break;
                            }
                            if( actualTokens[i].value !== expected.value ) {
                                failure = ( msgPrefix || '' ) + "Value mismatch at token " + i + ": expected " + expected.value + ', got ' + actualTokens[i].value;
                                break;
                            }
                        }
                    } else {
                        failure = ( msgPrefix || '' ) + "Number of tokens is different: expected " + expectedTokens.length + ', got ' + actualTokens.length;
                    }
                }

                // verify tokens in forward order
                while( token = tokenizer.next() ) {
                    actualTokens.push( token );
                    document.write( '<li>type=' + token.tokenType + ', value=' + token.tokenValue + '</li>' );
                }
                checkMatch( '' );

                // step back through all of them to make sure backtracking works
                actualTokens = [];
                while( token = tokenizer.prev() ) {
                    actualTokens.unshift( token );
                }
                checkMatch( 'Backtracking: ' );
            } catch( e ) {
                error = e.message;
            }
            className = !!error ? 'error' : !!failure ? 'fail' : 'pass';

            document.write( '</ul></td><td class="result ' + className + '">' + ( error || failure || 'Passed' ) + '</td></tr>' );
        }

    </script>

    <script type="text/javascript" src="../sources/Color.js"></script>
    <script type="text/javascript" src="../sources/Tokenizer.js"></script>

    <table>
        <thead>
            <tr>
                <th>CSS Value</th>
                <th>Tokens</th>
                <th>Test Result</th>
            </tr>
        </thead>
        <tbody>
            <script type="text/javascript">

                runTest( '#00CCFF', [
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue: '#00CCFF' }
                ] );

                runTest( 'rgb(0,127, 255 )', [
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue:'rgb(0,127, 255 )' }
                ] );

                runTest( 'rgba(0,127, 255, 1 )', [
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue:'rgba(0,127, 255, 1 )' }
                ] );

                runTest( 'linear-gradient(center top, yellow, blue)', [
                    { tokenType: PIE.Tokenizer.Type.FUNCTION, tokenValue: 'linear-gradient' },
                    { tokenType: PIE.Tokenizer.Type.IDENT, tokenValue: 'center' },
                    { tokenType: PIE.Tokenizer.Type.IDENT, tokenValue: 'top' },
                    { tokenType: PIE.Tokenizer.Type.OPERATOR, tokenValue: ',' },
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue: 'yellow' },
                    { tokenType: PIE.Tokenizer.Type.OPERATOR, tokenValue: ',' },
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue: 'blue' },
                    { tokenType: PIE.Tokenizer.Type.CHARACTER, tokenValue: ')' }
                ] );

                runTest( 'linear-gradient(top, yellow, rgba(0,0,255,0.5))', [
                    { tokenType: PIE.Tokenizer.Type.FUNCTION, tokenValue: 'linear-gradient' },
                    { tokenType: PIE.Tokenizer.Type.IDENT, tokenValue: 'top' },
                    { tokenType: PIE.Tokenizer.Type.OPERATOR, tokenValue: ',' },
                    { tokenType: PIE.Tokenizer.Type.COLOR, tokenValue: 'yellow' },
                    { tokenType: PIE.Tokenizer.Type.OPERATOR, tokenValue: ',' },
                    { tokenType: PIE.Tokenizer.Type.COLOR,  tokenValue: 'rgba(0,0,255,0.5)' },
                    { tokenType: PIE.Tokenizer.Type.CHARACTER, tokenValue: ')' }
                ]);

                runTest( 'top 15px 3em 50%', [
                    { tokenType: PIE.Tokenizer.Type.IDENT, tokenValue: 'top' },
                    { tokenType: PIE.Tokenizer.Type.LENGTH, tokenValue: '15px' },
                    { tokenType: PIE.Tokenizer.Type.LENGTH, tokenValue: '3em' },
                    { tokenType: PIE.Tokenizer.Type.PERCENT, tokenValue: '50%' }
                ] );

            </script>
        </tbody>
    </table>

</body>

</html>